export const useAppStore = defineStore('app', () => {
  const sidebarStatus = useStorage('sidebarStatus', 'closed')
  const device = ref<string>('desktop')

  const sidebar = reactive({
    opened: sidebarStatus.value !== 'closed',
    withoutAnimation: false
  })

  // actions
  function toggleSidebar() {
    sidebar.opened = !sidebar.opened
    sidebar.withoutAnimation = false
    if (sidebar.opened) {
      sidebarStatus.value = 'opened'
    } else {
      sidebarStatus.value = 'closed'
    }
  }

  function closeSideBar(withoutAnimation: boolean) {
    sidebar.opened = false
    sidebar.withoutAnimation = withoutAnimation
    sidebarStatus.value = 'closed'
  }

  function openSideBar(withoutAnimation: boolean) {
    sidebar.opened = true
    sidebar.withoutAnimation = withoutAnimation
    sidebarStatus.value = 'opened'
  }

  function toggleDevice(val: string) {
    device.value = val
  }

  return {
    device,
    sidebar,
    toggleDevice,
    toggleSidebar,
    closeSideBar,
    openSideBar
  }
})
